<template>
  <div class="pc-video-card">
    <div class="video">
      <video ref="video" :src="videoItem.content" controls></video>
      <div class="op-btn">
        <div class="small-hand agree" :class="isAgree ? 'active' : '' " @click="handleLikeVideo"><a-icon type="heart" theme="filled" /></div>
        <div class="like-num">{{ videoItem.likeNum }}</div>
        <div class="small-hand collect" :class="isCollect ? 'active' : '' " @click="handleCollectVideo"><a-icon type="star" theme="filled"/></div>
        <div class="collect-num">20</div>
        <div class="small-hand message" @click="handleShowMessage"><a-icon type="message" theme="filled" /></div>
        <div class="message-num">20</div>
      </div>
    </div>
    <div class="title text-line-2">{{ videoItem.title }}</div>
    <div class="info">
      <div class="left">
        <div class="avatar flex-center">
          <img src="../assets/img.jpg" alt="">
        </div>
        <div class="name" style="font-weight: 600;">小明</div>
        <div class="time" style="font-size: 12px;">{{ videoItem.time }}</div>
        <!-- <div class="label">超多赞同</div> -->
      </div> 
      <div class="right">
        <a-popover :getPopupContainer="(triggerNode) => triggerNode.parentNode" v-model="isClickEllipsis" trigger="click" placement="bottom">
          <div @click="hideEllipsis" slot="content">
            <span>举报</span>
          </div>
          <a-icon type="ellipsis" />
        </a-popover>
      </div>
    </div>
    <!-- //评论的弹框 -->
    <a-modal v-model="showMessage" :footer="null" title="评论详情">
      <Message :articleId="videoItem.id + ''"></message>
    </a-modal>
  </div>
</template>

<script>
import Message from "@/components/comments/Message"
import {likeArticle,collectArticle,isCollectArticle,isLikeArticle} from "@/api/request"
export default {
  name: 'pcVideoCard',
  components: {
    Message
  },
  props:{
    videoItem:Object
  },
  data(){
      return{
        isClickEllipsis:false,
        isAgree:false,
        isCollect:false,
        showMessage:false
      }
    },
  mounted(){
    // console.log(this.isAgree,this.isCollect)
    this.openNotification()
    // console.log(this.videoItem,'zse')
    this.handleIsCollectArticle()
    this.hanldeIsLikeOrNotLike()
  },
  methods:{
    hideEllipsis(){
      this.isClickEllipsis=false
    }, 
    handleLikeVideo(){
      this.isAgree=!this.isAgree
      likeArticle({
        "publishId":this.videoItem.id,
        "type":0,
        "isAgree":this.isAgree,
      }).then(res=>{
        if(res.data.status===0){
          this.$message.success('成功！')
          
          }
        else{
          this.$message.error('点赞失败！')
        }
        this.$emit('updateVideoData');
      })
    },
    handleCollectVideo(){
      this.isCollect=!this.isCollect
      let obj={
                "articleId":this.videoItem.id,
                "fileFolderId":-1,
                "isCollect":this.isCollect
            }
            collectArticle(obj).then(res=>{

              if(res.data.status===0){
                this.$message.success(res.data.message)
              }else{
                this.$message.error(res.data.message)
              }
            })
    },
    handleIsCollectArticle(){
            isCollectArticle({
                "articleId":this.videoItem.id
            }).then(res=>{
                // console.log('aaa',res)
                if(res.data.status===0){
                    this.isCollect=res.data.data.isCollect
                }
            })
    },
    hanldeIsLikeOrNotLike(){
            isLikeArticle({
                "publishId":this.videoItem.id
            }).then(res=>{
                console.log('11',res)
                if(res.data.status===0){
                    this.isAgree=res.data.data.isLike
                }
            })
    },
    handleShowMessage(){
      this.showMessage=true
    },
    openNotification() {
      const key = `open${Date.now()}`;
      this.$notification.open({
        message: '提示',
        description:
          '提示：按上下箭头切换视频',
        btn: h => {
          return h(
            'a-button',
            {
              props: {
                type: 'primary',
                size: 'small',
              },
              on: {
                click: () => this.$notification.close(key),
              },
            },
            'Confirm',
          );
        },
        key,
        onClose: close,
      })
    }  
  }
}
</script>

<style scoped lang="less">
.active{
  color: red;
}
.pc-video-card{
  margin-bottom: 20px;
  // width: 33.3%;
  // margin: 0 20px 30px 0;
  .video{
    position: relative;
    width: 100%;
    // height: 120px;
    height: calc(100vh - 214px );
    object-fit: contain;
    border-radius: 8px;
    overflow: hidden;
    .op-btn{
      position: absolute;
      z-index: 10;
      right: 20px;
      top:20%;
      .collect,.agree,.message{
        font-size: 20px;
      }
    }
  }
  .title{
    margin-top:10px;
    font-weight: 600;
    font-size: 16px;
  }
  .info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
      display: flex;
      align-items: center;
      .avatar{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        overflow: hidden;
      }
      .name{
        margin: 0 10px;
      }
    }
  }
}
</style>
